import React, { useState, useEffect } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css'; // 导入编辑器样式

// 定义编辑器工具栏配置
const modules = {
    toolbar: [
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
        [{ 'font': [] }],
        [{ 'size': ['small', false, 'large', 'huge'] }],
        ['bold', 'italic', 'underline', 'strike'],
        [{ 'color': [] }, { 'background': [] }],
        [{ 'align': [] }],
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        [{ 'indent': '-1' }, { 'indent': '+1' }],
       /* ['link', 'image'],*/
        ['clean']
    ],
};

// 格式配置
const formats = [
    'header', 'font', 'size',
    'bold', 'italic', 'underline', 'strike', 'color', 'background',
    'align', 'list', 'indent'
    /*'link', 'image'*/
];

// 从HTML中提取纯文本
const htmlToText = (html) => {
    if (!html) return '';
    // 创建临时元素来解析HTML
    const tempDiv = document.createElement('div');
    tempDiv.innerHTML = html;
    // 获取纯文本并去除多余空格
    return tempDiv.textContent || tempDiv.innerText || '';
};
// 计算汉字数量（每个汉字算1个，其他字符忽略或折算）
const countChineseCharacters = (text) => {
    if (!text) return 0;
    // 匹配中文字符的正则表达式
    const chineseChars = text.match(/[\u4e00-\u9fa5]/g);
    return chineseChars ? chineseChars.length : 0;
};

const SimpleEditor = ({ initialContent, onChange, height = '100%',width='50%' }) => {
    const [content, setContent] = useState('');
    const [charCount, setCharCount] = useState(0);
    const [isOverLimit, setIsOverLimit] = useState(false);
    const MAX_CHARS = 200; // 最大汉字数量
    // 初始化内容
    useEffect(() => {
        if (initialContent) {
            setContent(initialContent);
        }
        const text = htmlToText(initialContent);
        setCharCount(countChineseCharacters(text));
    }, [initialContent]);

    // 内容变化处理
    const handleChange = (value) => {
        const text = htmlToText(value);
        const newCount = countChineseCharacters(text);
        if(newCount<=MAX_CHARS){
            setContent(value);
            setCharCount(newCount)
            setIsOverLimit(false);
            if (onChange) {
                onChange(value);
            }
        }else if(!isOverLimit){
            setCharCount(newCount);
            setIsOverLimit(true);
            // 可以在这里添加提示或自动截断
            alert(`已超过最大字数限制(${MAX_CHARS}个汉字)`);
        }

    };

    return (
        <div className="editor-container border rounded-md overflow-hidden shadow-sm">
            <ReactQuill
                theme="snow"
                value={content}
                onChange={handleChange}
                modules={modules}
                formats={formats}
                //style={{ height: `${height}px` }}
                style={{
                    height: height,
                    width:width,
                    minHeight: height,
                    minWidth:width,
                    backgroundColor: '#ffffff'
                }}
                placeholder="开始编辑文章摘要..."
            />
        </div>
    );
};

export default SimpleEditor;
